<template>
  <div class="login-wrapper relative">
    <div class="lg-header">
      <img src="~@/assets/images/login/login-bg_header.svg" alt="" />
    </div>

    <div class="lg-main">
      <div class="left-bg"></div>

      <div class="right-form">
        <div class="form-wrap">
          <h1 class="text-center">登录</h1>

          <Form
            class="custom-ivu-form mt50"
            ref="formRef"
            :label-width="100"
            :model="formData"
            :rules="rules"
            @submit.native.prevent="handleFormSubmit"
          >
            <FormItem prop="userAccount">
              <Input
                v-model="formData.userAccount"
                prefix="ios-person-outline"
                placeholder="请输入您的用户名"
                size="large"
                clearable
              ></Input>
            </FormItem>
            <FormItem prop="passWord">
              <Input
                v-model="formData.passWord"
                :type="pwdVisible ? 'text' : 'password'"
                prefix="ios-lock-outline"
                placeholder="请输入您的密码"
                size="large"
              >
                <template #suffix>
                  <Icon class="f20" style="color: #000" @click="pwdVisible = !pwdVisible" :type="pwdIconType" />
                </template>
              </Input>
            </FormItem>
            <FormItem>
              <Checkbox v-model="remember">记住我</Checkbox>
            </FormItem>
            <FormItem class="mt30">
              <Button type="primary" style="width: 100%" html-type="submit">登录</Button>
            </FormItem>
          </Form>
        </div>
      </div>
    </div>

    <div class="lg-footer-bg"></div>
  </div>
</template>

<script>
// util
import { createForm, createRules, keyStr, ivStr, handleUserInfo } from './service'
import { handleRequestStatus } from '@/utils/uitls.js'
import { Encrypt, Decrypt } from '@/utils/passwordUtil.js'
import { renderRoutes } from '@/router/router.js'

// request
import { postLogin } from '@/api/login/index.js'

export default {
  name: 'Login',

  data() {
    return {
      formData: createForm(),
      rules: createRules(),
      pwdVisible: false,
      remember: false,
      goHomeCount: 0, // 发生错误时重新跳转进行计数
    }
  },

  computed: {
    pwdIconType() {
      const { pwdVisible } = this
      return `ios-eye${pwdVisible ? '' : '-off'}-outline`
    },
  },

  methods: {
    handleFormSubmit() {
      this.$refs.formRef.validate().then((valid) => {
        if (!valid) return
        const p = { ...this.formData }
        p.passWord = Encrypt(p.passWord, keyStr, ivStr)
        this.postLogin(p)
      })
    },

    async postLogin(params) {
      // this.$Spin.show()
      // return
      const res = await postLogin(params)
      const data = res.data || {}
      handleRequestStatus(res, '登录', () => this.handleUserInfo(data.data, params))
    },

    handleUserInfo(data, params) {
      const storage = window.localStorage

      storage.setItem('remember', this.remember)
      if (this.remember) {
        storage.setItem('ap', JSON.stringify(params))
      } else {
        storage.removeItem('ap')
      }

      /* 从本页面登录的用户都是非管理端权限 */
      data.userType = 'normal'
      handleUserInfo(data)
      renderRoutes().then(() => {
        this.goHome()
        // this.$Message.success('登录成功')
      })
    },

    goHome() {
      if (this.goHomeCount > 7) return
      this.goHomeCount ++
      setTimeout(
        () =>
          this.$router.replace('/').catch((err) => {
            this.goHome()
            console.log('跳转错误', err)
          }),
        400,
      )
    },
  },

  mounted() {
    // console.log(renderRoutes)
    // console.log(this.$router)
    const remember = window.localStorage.getItem('remember') === 'true' ? true : false
    this.remember = remember
    if (remember) {
      const f = JSON.parse(window.localStorage.getItem('ap') || '{}')
      this.formData.userAccount = f.userAccount
      this.formData.passWord = Decrypt(f.passWord, keyStr, ivStr)
    }
  },

  /* beforeDestroy() {
    this.$Spin.hide()
  }, */
}
</script>

<style lang="less" scoped>
/* * {
  padding: 0;
  margin: 0;
} */
.login-wrapper {
  font-family: PingFang SC;
}
.lg-header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 48px;
  overflow: hidden;

  img {
    height: 100%;
    float: right;
    object-fit: cover;
  }
}

.lg-main {
  position: relative;
  z-index: 1;
  display: flex;

  .left-bg {
    // width: 57%;
    width: 830px;
    height: 100vh;
    min-height: 900px;
    flex-shrink: 0;
    background: url('~@/assets/images/login/login-bg.svg') no-repeat;
    background-size: cover;
  }

  .right-form {
    flex-grow: 1;
    display: flex;
  }

  .form-wrap {
    width: 480px;
    margin: auto;
    h1 {
      height: 45px;
      line-height: 45px;
      color: #000000;
      font-size: 32px;
    }
  }
}

.lg-footer-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 322px;
  height: 242px;
  background: url('~@/assets/images/login/login-bg_footer.svg') no-repeat;
  background-size: cover;
}
</style>
<style scoped>
.lg-header img {
  width: calc(100% - 830px);
}
</style>
